<template>
    <div>
        <div class="btn_group">
		    	<el-button type="primary" size="medium" @click="handleCreate">新建</el-button>
		    </div>
        <!-- <div style="background: #fff;text-align: left; padding: 20px">
          <el-skeleton :rows="5" animated />
        </div> -->
        <el-table :data="tableData" style="width: 100%" :row-style="{fontWeight: 600, textAlign: 'center'}" :cell-style="{textAlign: 'center'}" :header-cell-style="{textAlign: 'center'}" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" v-if="showSelect" />
          <el-table-column prop="state" label="状态" width="100" />
          <el-table-column prop="t_name" label="名称" width="100" />
          <el-table-column prop="create_time" label="创建时间" width="200" />
          <el-table-column prop="progress" label="详细"  >
              <template #default="scope">
                  <div class="detail">
                      <div class="progress_wrapper">
                          <span class="title">训练进度:</span>
                          <div class="progress">
                              <el-progress :stroke-width="20" :show-text="false" :indeterminate="scope.row.progress < 95" :percentage="scope.row.progress" :status="scope.row.state === '训练中' ? '' : 'success'" />
                          </div>
                      </div>
                      <el-button type="success" size="small" @click="handleDetail(scope.row)">详情</el-button>
                      <el-button type="primary" size="small" :disabled="scope.row.progress === 100 ? false : true" @click="handleStorage(scope.row)">保存</el-button>
                      <el-button type="danger" size="small" @click="handleDeleteRow(scope.row.id)">删除</el-button>
                  </div>
              </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination layout="prev, pager, next" :total="10"></el-pagination>
        </div>
        <el-dialog
          v-model="dialogVisible"
          title="新增训练"
          width="50%"
          :before-close="handleClose"
        >
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="训练名称">
              <el-input v-model="form.t_name" placeholder="请输入训练名称"></el-input>
            </el-form-item>
            <el-form-item label="环境类别">
              <el-select v-model="form.e_sort" placeholder="请选择环境">
                <el-option v-for="(item, index) in envOptionsList" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="智能体类别">
              <el-select v-model="form.category" placeholder="请选择智能体">
                <el-option v-for="(item, index) in cateOptionsList" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="handleConfirm"
                >确认</el-button
              >
            </span>
          </template>
        </el-dialog>
        <el-dialog
          v-model="detailDialog"
          title="详情"
          width="50%"
          :before-close="handleClose"
        >
          <h4>环境：{{detailData.e_sort}}</h4>
          <h4>智能体：{{detailData.category}}</h4>
          <template #footer>
            <span class="dialog-footer">
              <el-button type="primary" @click="detailDialog = false"
                >关闭</el-button
              >
            </span>
          </template>
        </el-dialog>
    </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import * as trainApi from './api'
import * as envApi from '../env/api'
import * as CateApi from '../category/api'

export default {
  data () {
    return {
      tableData: [],
      multipleSelection: [],
      showSelect: false,
      dialogVisible: false,
      detailDialog: false,
      form: {
        e_sort: '',
        t_name: '',
        category: ''
      },
      loading: true,
      envOptionsList: [],
      cateOptionsList: [],
      detailData: {}
    }
  },
  methods: {
    query () {
      trainApi.battleList().then(res => {
        this.tableData = res
      })
      envApi.battleList().then(res => {
        this.envOptionsList = res.map(item => item.e_name)
      })
      CateApi.battleList().then(res => {
        this.cateOptionsList = res.map(item => item.c_name)
      })
    },
    handleCreate () {
      this.dialogVisible = true
    },
    handleSelect () {
      this.showSelect = !this.showSelect
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleDelete () {
      this.tableData = this.tableData.filter(item => !this.multipleSelection.includes(item))
      this.showSelect = false
    },
    handleConfirm () {
      ElMessageBox.confirm(
        '是否确定新增',
        'Warning',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        trainApi.vs_add(this.form).then(res => {
          if (res) {
            ElMessage({
              message: '新增成功',
              type: 'success'
            })
            this.query()
          } else {
            ElMessage({
              message: '新增失败',
              type: 'danger'
            })
          }
        })
        this.dialogVisible = false
        this.$nextTick(() => {
          this.createInterval()
        })
      })
    },
    handleClose (done) {
      done()
    },
    createInterval () {
      let timer = setInterval(() => {
        this.tableData[this.tableData.length - 1].progress += Math.floor(Math.random() * 10)
        if (this.tableData[this.tableData.length - 1].progress >= 100) {
          this.tableData[this.tableData.length - 1].progress = 100
          this.tableData[this.tableData.length - 1].state = '训练结束'
          trainApi.over(this.tableData[this.tableData.length - 1].id).then(() => {
            this.query()
          })
          clearInterval(timer)
          timer = null
        }
      }, 3000)
    },
    handleStorage (data) {
      trainApi.add_train({
        m_name: data.t_name,
        environment: data.e_sort
      }).then(res => {
        if (res) {
          ElMessage({
            message: '保存成功',
            type: 'success'
          })
        } else {
          ElMessage({
            message: '保存失败',
            type: 'danger'
          })
        }
      })
    },
    handleDetail (data) {
      this.detailDialog = true
      this.detailData = data
    },
    handleDeleteRow (id) {
      ElMessageBox.confirm(
        '是否确定删除',
        'Warning',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        trainApi.vs_del(id).then(res => {
          if (res) {
            ElMessage({
              message: '删除成功',
              type: 'success'
            })
            this.query()
          } else {
            ElMessage({
              message: '删除失败',
              type: 'danger'
            })
          }
        })
        this.dialogVisible = false
      })
    }
  },
  mounted () {
    this.query()
  }
}
</script>

<style lang="scss" scoped>
    .block {
        position: absolute;
        right: 20px;
        margin-top: 30px;
    }
    .detail {
        display: flex;
        padding-left: 100px;
        align-items: center;
        .progress_wrapper{
            display: flex;
            .title {
                flex: 1;
                flex-shrink: 0;
            }
            .progress {
                width: 230px;
                margin-left: 10px;
            }
            margin-right: 80px;
        }
    }
</style>
